import React, { useState, createContext, useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Text } from 'react-native';

// Import pages
import Login from '../pages/Login';
import Shou from '../pages/wly/Shou';
import Message from '../pages/Message';
import Contacts from '../pages/Contacts';
import Profile from '../pages/Profile';
import Shezhi from '../pages/wly/Shezhi';
import AllApplications from '../pages/wzb/all';
import ZhuanzhengApplication from '../pages/wzb/zhuanzheng';
import MyApplications from '../pages/wzb/my';
import ApprovalDetails from '../pages/wzb/text';
import QingjiaApplication from '../pages/wzb/qingjia';
import JiabanApplication from '../pages/wzb/jiaban';
import XinziApplication from '../pages/wzb/xinzi';
import LuyongApplication from '../pages/wzb/luyong';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

// Create Auth Context
interface AuthContextType {
  isLoggedIn: boolean;
  setIsLoggedIn: (value: boolean) => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

// Simple icon component for tab bar
const TabIcon = ({ name, focused }: { name: string; focused: boolean }) => {
  const iconMap: { [key: string]: string } = {
    '办公': '📚',
    '消息': '📧',
    '通讯录': '👥',
    '我的': '👤',
  };

  return (
    <Text style={{ fontSize: 20, color: focused ? '#9C27B0' : '#999' }}>
      {iconMap[name] || '📱'}
    </Text>
  );
};

// Tab Navigator for main app screens
const TabNavigator: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => (
          <TabIcon name={route.name} focused={focused} />
        ),
        tabBarActiveTintColor: '#9C27B0',
        tabBarInactiveTintColor: '#999',
        tabBarStyle: {
          backgroundColor: 'white',
          borderTopWidth: 1,
          borderTopColor: '#E0E0E0',
          paddingVertical: 8,
          height: 60,
        },
        tabBarLabelStyle: {
          fontSize: 12,
          marginTop: 4,
        },
        headerShown: false, // Hide the default header
      })}
    >
      <Tab.Screen 
        name="办公" 
        component={Shou}
        options={{
          title: '办公',
        }}
      />
      <Tab.Screen 
        name="消息" 
        component={Message}
        options={{
          title: '消息',
        }}
      />
      <Tab.Screen 
        name="通讯录" 
        component={Contacts}
        options={{
          title: '通讯录',
        }}
      />
      <Tab.Screen 
        name="我的" 
        component={Profile}
        options={{
          title: '我的',
        }}
      />
    </Tab.Navigator>
  );
};

// Root Navigator to handle authentication
const AppNavigator: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(true); // Start with logged in state

  return (
    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          {isLoggedIn ? (
            <>
              <Stack.Screen name="MainApp" component={TabNavigator} />
              <Stack.Screen name="设置" component={Shezhi} />
              <Stack.Screen name="AllApplications" component={AllApplications} />
              <Stack.Screen name="Zhuanzheng" component={ZhuanzhengApplication} />
              <Stack.Screen name="My" component={MyApplications} />
              <Stack.Screen name="Text" component={ApprovalDetails} />
              <Stack.Screen name="Qingjia" component={QingjiaApplication} />
              <Stack.Screen name="Jiaban" component={JiabanApplication} />
              <Stack.Screen name="Xinzi" component={XinziApplication} />
              <Stack.Screen name="Luyong" component={LuyongApplication} />
            </>
          ) : (
            <Stack.Screen name="Login" component={Login} />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

export default AppNavigator; 